<template>
  <div class="personnelAdd">
    <el-breadcrumb separator="/" class="ml_5">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="lh lh-seller fw_100"></i>
      </el-breadcrumb-item>
      <el-breadcrumb-item>灵工学院</el-breadcrumb-item>
      <el-breadcrumb-item>修改教程</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="content_Box box-shadow mt_15 px_10">
      <h4 class="border-bottom pb_10 mb_20">修改教程</h4>
      <el-form label-width="100px" class="mw_400">
        <el-form-item label="应用" :required="true">
          <el-select class="w_100p" v-model="channel" placeholder="请选择">
            <el-option
              v-for="item in channelList"
              :key="item.channel"
              :label="item.name"
              :value="item.channel"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" :required="true">
          <el-select class="w_100p" v-model="city_id" placeholder="城市">
            <el-option
              v-for="item in cityList"
              :key="item.id"
              :label="item.city_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教程分类" :required="true">
          <el-select class="w_100p" v-model="category_id" placeholder="请选择">
            <el-option
              v-for="item in demandList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="教程标题" :required="true">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="封面图">
          <uploadedit
            pic_name="'cover_image'"
            :pic_url="cover_image"
            @func="img5"
          ></uploadedit>
        </el-form-item>
        <el-form-item label="跳转地址" :required="true">
          <el-input v-model="jump_url"></el-input>
        </el-form-item>
        <el-form-item label="排序" :required="true">
          <el-input v-model="sorts"></el-input>
        </el-form-item>
        <el-form-item label="发布状态" :required="true">
          <el-switch
            v-model="status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="8"
            :cols="44"
            placeholder=""
            v-model="describe"
          ></el-input>
        </el-form-item>

        <el-form-item class="my_20">
          <el-button round type="success" @click="submitBtn">提交</el-button>
          <el-button round @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
var common = require("../../../static/tool.js");
import { appChannelGetlist } from '@/api/banner'
import { fetchCityList } from '@/api/city.js'

export default {
  name: "HelpAdd",
  data() {
    return {
      windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
      screenHeight: document.documentElement.clientHeight,
      manageInfo: JSON.parse(sessionStorage.getItem("manageInfo")), //登录信息
      url: common.url,
      demandList: [],//教程分类id
      category_id: "",
      name: "",
      cover_image: "",
      jump_url: "",
      sorts: "",
      describe: "",
      status: "",
      channelList: [],
      channel: '',
      cityList: [],
      city_id: ''
    };
  },
  computed: {

  },
  created() {
    //教程分类-列表
    this.listShop();
    //数据复显
    this.getInfo();
    this.getChannel()
    this.getCityList()
  },
  methods: {
    // 获取应用分类
    async getChannel() {
      try {
        const res = await appChannelGetlist()
        this.channelList = res.list
      } catch (error) {
        console.log('error', error)
      }
    },
    // 获取城市列表
    async getCityList() {
      try {
        const res = await fetchCityList()
        this.cityList = res.list
      } catch (error) {
        console.log('error', error)
      }
    },
    //教程分类-列表
    listShop() {
      let fn = new FormData();
      this.$http.post(this.url + "/course_category/getList", fn).then(
        (res) => {
          if (res.data.msg == "查询成功" || res.data.code == "200") {
            if (res.data.data.data != null) {
              this.demandList = res.data.data.data;
            } else {
              this.demandList = [];
            }
          } else if (res.data.code == "8886") {
            //code   8886  登录过期
            sessionStorage.clear();
            this.$alert("登录已过期，请重新登录 !", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                window.location = "login.html";
              },
            });
            return;
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        },
        (res) => {
          this.$message.error("网络错误！");
          return;
        }
      );
    },
    //数据复现
    getInfo() {
      let fn = new FormData();
      fn.append("sn", this.$route.query.sn); //sn
      this.$http.post(this.url + "/course/getInfo", fn).then(
        (res) => {
          if (
            res.data.msg == "操作成功！" ||
            res.data.code == "200"
          ) {
            const { category_id, name, cover_image, jump_url, sort, describe, channel, status, city_id } = res.data.data
            this.category_id = category_id;
            this.name = name;
            this.cover_image = cover_image;
            this.jump_url = jump_url;
            this.sorts = sort;
            this.describe = describe;
            this.channel = channel
            this.city_id = city_id
            var status_tag;
            if (status == 1) {
              status_tag = true;//正常
            } else {
              status_tag = false;//停用
            }
            this.status = status_tag;
          } else if (res.data.code == "8886") {
            //code   8886  登录过期
            sessionStorage.clear();
            this.$alert("登录已过期，请重新登录 !", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                window.location = "login.html";
              },
            });
            return;
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        },
        (res) => {
          this.$message.error("网络错误！");
          return;
        }
      );
    },
    submitBtn() {
      // 修改的接口
      if (
        !this.channel ||
        !this.city_id ||
        this.category_id == "" ||
        this.name == "" ||
        this.jump_url == "" ||
        this.sorts == ""
      ) {
        this.$message.error("请填写必填项");
        return;
      }
      let fn = new FormData();
      fn.append("sn", this.$route.query.sn);
      fn.append("category_id", this.category_id);
      fn.append("name", this.name);
      fn.append("cover_image", this.cover_image);
      fn.append("jump_url", this.jump_url);
      fn.append("sort", this.sorts);
      fn.append("describe", this.describe);
      fn.append("channel", this.channel);
      fn.append("city_id", this.city_id);

      var status_tag;
      if (this.status == true) {
        status_tag = 1;//正常
      } else {
        status_tag = 2;//停用
      }
      fn.append("status", status_tag);


      this.$http.post(this.url + "/course/setInfo", fn).then(
        (res) => {
          if (
            res.data.msg == "操作成功！" ||
            res.data.code == "200"
          ) {
            this.$message.success(res.data.msg);
            this.back();
          } else if (res.data.code == "8886") {
            //code   8886  登录过期
            sessionStorage.clear();
            this.$alert("登录已过期，请重新登录 !", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                window.location = "login.html";
              },
            });
            return;
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        },
        (res) => {
          this.$message.error("网络错误！");
          return;
        }
      );
    },
    back() {
      //返回
      this.$router.go(-1);
    },
    img5(data) {
      // console.log(data);
      this.cover_image = data;
    },
  }
};
</script>

<style scoped>
.row-info {
  padding: 10px 0;
}
.resetBtn,
.btnOK {
  padding: 0 30px;
}
.title-key {
  width: 100px;
}
.list-cont img {
  width: 128px;
}
</style>



// WEBPACK FOOTER //
// src/components/courselist/CourseEdit.vue